<template>
     <view style="padding-bottom: 30px;">
		
		<cu-custom  :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		<view class="work-title">
			<view class="work-title-con">
				<image class="workImg" :src="userInfo.avatarUrl || defaultPic" mode=""></image>
				<view class="work-title-text">
					<text class="textH1">湖南小左物联网有限公司</text>
					<text class="textH5">高塘岭街道、月亮岛街道</text>
					<text class="textH5">智慧家庭工程师</text>
				</view>
			</view>
		</view>
		
		<view class="work-ul">
			<view class="work-li" >
				<view class="work-li-con" v-for=" item in workData" :key="item.id" @tap="toRouter(item)"> 
					<image class="imgstyles" :src="item.icon" mode=""></image>
					<text class="textColor">{{ item.name }}</text>
				</view>
			</view>
		</view>
		
		<view class="work-dbsx">
			<view class="work-dbsx-title">
				<text class="title-border"></text>
				<text class="" style="color: #000;font-size: 26rpx;">
					代办提醒
				</text>
			</view>
			<view class="work-dbsx-ul " v-if="workList.length > 0">
				<view class="work-dbsx-li" v-for="item in workList" :key="item.id">
					<view class="work-dbsx-liCon">
						<view class="work-dbsx-lirow">
							<uni-icons type="location-filled" size="18" color="#edeaea"></uni-icons>
							<text class="textStyles">{{ item.detailAddress }}</text>
						</view>
						<view class="work-dbsx-lirow">
							<text class="textColrs">{{ item.appointmentTime }}</text>
						</view>
					</view>
					<view class="work-dbsx-liCon">
						<view class="work-dbsx-lirow">
							<text style="color: #9D9D9D;padding-left: 20px;">{{ item.name }}</text>
						</view>
						<view class="work-dbsx-lirow">
							<view class="work-btn-con">
								<text class="textBtn1" @tap="modify(item)">修改</text>
								<text class="textBtn2" @tap="create(item)">处理</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<u-empty class="empty-con" text="暂无代办事项" mode="data"></u-empty>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import config from 'config/env'
	import { getSkllWork } from '@/api/skill.js'
	
	export default {
		data() {
			return {
				pageDesign: {
					pageName: '工作服务'
				},
				theme: getApp().globalData.theme, //主题
				userInfo: this.$store.state.user.userInfo,
				// 默认的空图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				current:1,
				size:10,
				status:2, //未领取
				workData:[
					{
						id : 0,
						name : '客户',
						icon : `${config.imgSrcL}kh.png`
					},
					{
						id : 1,
						name : '工单',
						icon : `${config.imgSrcL}gdan.png`
					},
					{
						id : 2,
						name : '数据看板',
						icon : `${config.imgSrcL}sjkb.png`
					},
					{
						id : 3,
						name : '组织',
						icon : `${config.imgSrcL}zuzhi.png`
					},
					{
						id : 4,
						name : '审批',
						icon : `${config.imgSrcL}spp.png`
					},
					{
						id : 5,
						name : '职能人事',
						icon : `${config.imgSrcL}znrs.png`
					},
					{
						id : 6,
						name : '考勤打卡',
						icon : `${config.imgSrcL}kq.png`
					},
					{
						id : 7,
						name : '日志',
						icon : `${config.imgSrcL}rzhi.png`
					}
					
				],
				workList:''
			};
		},
		onShow() {
			this.getSkllWorkList()
		},
		onLoad() {
			
		},
		methods:{
			modify(item){
				uni.navigateTo({
					url:`/subpkg/skill/editWork/editWork?data=${JSON.stringify(item)}`
				})
			},
			create(item){
				console.log('创建')
				uni.navigateTo({
					url:`/subpkg/skill/createWork/createWork?data=${JSON.stringify(item)}`
				})
			},
			toRouter(item){
				const { name } = item
				if( name === '客户' || name === '数据看板' || name === '阻止' || name === '审批' || name === '职能人事' || name === '考勤打卡' || name === '日志'){
									 
					uni.$showMsg('功能开发中')
									
				}else if (name === '工单'){
									 
					uni.navigateTo({
						url:'/subpkg/skill/WorkOrderPool/WorkOrderPool'
					})
									 
				}else if (name === '丽人服务'){
					uni.navigateTo({
						url:'/subpkg/beauty/beautyIndex/beautyIndex'
					})
									 
				}else if (name === '技能认证'){
					uni.navigateTo({
						url:'/subpkg/skill/skillIndex/skillIndex'
					})
				}else if(name === '工作服务'){
					uni.navigateTo({
						url:'/subpkg/skill/workServices/workServices'
					})
				}
			},
			async getSkllWorkList(){
			
				const { data } = await getSkllWork({
					current : this.current,
					size:this.size,
					status:this.status
				})
				
				this.workList = data.records.slice(0, 4);
				
				// console.log(data.records)
			}
		}
	}
</script>

<style lang="scss">
.u-empty.data-v-6938e513{
	background-color: #f8f8f8;
	padding: 100px 0;
}
.empty-con{
	background-color: #f8f8f8;
	padding: 100px 0;
}
.work-dbsx-ul{
	width: 95%;
	margin: 0 auto;
	.work-dbsx-liCon{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		
	}
	.work-dbsx-li{
		padding-bottom: 10px;
		border-bottom: 1px solid #f8f8f8
	}
	.work-dbsx-lirow{
		display: flex;
		.textColrs{
			color:#9D9D9D;
			font-size: 24rpx;
		}
		.textStyles{
		   font-size: 26rpx;
           color: #000;
		   margin-left: 3px;
		}
		.work-btn-con{
			width: 176rpx;
			display: flex;
			.textBtn1{
				
				padding: 5px 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #18b1bb;
				border-radius: 15px 0 0 15px;
				width: 89rpx;
				font-size: 24rpx;
				color: #fff;
			}
			.textBtn2{
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				color: #18b1bb;
				font-size: 24rpx;
				border-radius: 0px 15px 15px 0px;
				width: 87rpx;
				border:1px solid  #18b1bb;
			}
		}
		
	}
}
.work-dbsx{
	width: 100%;
	background-color: #fff;
	margin-top: 5px;
}
.work-dbsx-title{
	width: 95%;
	margin: 0 auto;
	display: flex;
	padding: 15px 0;
	color: #000;
	font-size: 28.12rpx;
	align-items: center;
	font-weight: 400;
}
.title-border::before {
	content: "";
	display:block;
	width: 6rpx;
	height: 24rpx;
	background: #B82D34;
	margin-right: 15rpx;
}
.work-ul{
	width: 100%;
	background-color: #fff;
	.work-li{
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		.work-li-con{
			display: flex;
			flex-direction: column;
			width: 25%;
			align-items: center;
			padding: 12px 0;
			.textColor{
				color: #353535;
				font-size: 24rpx;
				margin-top: 5px;
			}
		}
		.imgstyles{
			width:28px;
			height: 28px;
		}
	}
}
.work-title{
	width: 95%;
	margin: 10px auto;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 19rpx 0rpx rgba(0,0,0,0.03);
	border-radius: 18rpx;
	.work-title-con{
		padding:0 25.78rpx;
		
		height: 189rpx;
		display: flex;
		align-items: center;
		.work-title-text{
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			.textH1{
				font-size: 28rpx;
				font-weight: 400;
				color: #000;
				margin-bottom: 3px;
			}
			.textH5{
				color: #9D9D9D;
				font-size: 23rpx;
				margin-bottom: 2px;
			}
		}
		.workImg{
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}
	}
}
page{
	background-color: #f8f8f8;
}
.bgLiner{
	background: #fff;
	color: #000;
}
</style>
